﻿<script setup lang="ts" name="EditOtherSource">
import { FileApi } from '@/api/infra/file'
const { error, success } = useMessage()

const emit = defineEmits(['save', 'close'])

const initInfo: any = ref({
  dialogVisible: false,
  info: null
})

// 显示弹窗
const showDialog = (v) => {
  initInfo.value.dialogVisible = true
  initInfo.value.info = v
}

// 子组件将方法暴露给父组件
defineExpose({ showDialog })

// 关闭弹窗
const closeDialog = () => {
  initInfo.value.dialogVisible = false
  emit('close')
}

// 保存
const handleOk = () => {
  if (initInfo.value.info.title === '') {
    error('资源名称不能为空')
    return false
  }
  FileApi.update(initInfo.value.info).then((res:any) => {
    if (res.code === 200) {
      success('资源编辑成功！')
      emit('save')
      closeDialog()
    }
  })
}
</script>

<template>
  <ElDialog v-model="initInfo.dialogVisible" title="资源编辑" width="700px" align-center @close="closeDialog">
    <ElForm label-width="auto" label-position="top">
      <ElFormItem label="资源名称：">
        <ElInput v-model="initInfo.info.title" clearable maxlength="50" show-word-limit placeholder="请输入资源名称，长度不超过50个字" />
      </ElFormItem>
      <ElFormItem label="资源描述：">
        <ElInput v-model="initInfo.info.description" type="textarea" clearable maxlength="150" show-word-limit :autosize="false" resize="none" placeholder="" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="closeDialog">取消</ElButton>
        <ElButton type="primary" @click="handleOk">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.el-form{
  padding: 40px 100px;
  overflow: hidden;

  .el-form-item{
    :deep(.el-form-item__content){
      .el-textarea{
        .el-textarea__inner{
          height: 88px;
        }
      }
    }
  }
}
</style>
